<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 登录。
1.⽤户名必须包含数字和字⺟，不能有特殊字符（⾮ a-z 0-9）,⻓度  >=5以上
2.密码必须包含⼤写以及⾄少⼀个特殊字符，⻓度>=8
3.当点击登陆时，如果⽤户名和密码符合要求，需要提示验证合格信，不符合则在指定 input 标签处提示红⾊错误信息
 -->
 <style>
  form{
    width: 280px;
    height: 130px;
    margin: 50px auto;
    background-color: pink;
    border: 5px  solid orangered;
    border-radius: 15px;
  }
  .box1{
    width:330px;
    margin: 0 auto;
    height: 25px;
    margin-top: 25px;
    display: flex;
    align-items: center;
  }
  .box1 input{
    display: inline-block;
    width: 150px;
    height: 20px;
  }
  .box2{
    width:320px;
    margin: 0 auto;
    height: 25px;
    margin-top: 10px;
  }
  .box2 input{
    display: inline-block;
    width: 150px;
    height: 20px;
    margin-left: 10px;
  }
  .box3{
    width:60px;
    margin: 0 auto;
    height: 25px;
    margin-top: 10px;
  }
  .box3 input{
    width: 60px;
    height: 25px;
  }
  span{
    width: 40px;
    height: 20px;
    color:red;
    display: inline-block;
    font-size: 14px;
  }
 </style>
</head>
<body>
  <form action="" method="post" onsubmit="return checkAll()">
    <div class="box1">
      用户名：<input type="text" id="user">
      <span id="userInfo"></span>
    </div>
    <div class="box2">
      密 码：<input type="password" id="pass">
      <span id="passInfo"></span>
    </div>
    <div class="box3">
      <input type="submit" value="登录" >
    </div>
  </form>
</body>
<script>
  function checkAll () {
    return checkUser() && checkpass()
  }
  function checkUser(){
    let reg1 = /^\w{5,}$/;
    let value = document.getElementById('user').value;
    if(reg.test(value) == false){
      document.getElementById("userInfo").innerHTML = "错误!!";
      return false;
    }else{
      return true;
    }
  }
  function checkpass(){
    let reg2 = /^[A-Z]{1,}[0-9]+\W{1,}$/;
    let pass = document.getElementById('pass').value;
    if(reg.test(pass) == false){
      document.getElementById("passInfo").innerHTML = "错误!!";
      return false;
    }else{
      return true;
    }
  }
</script>
</html>